<template>
    <div class="addOrEditCardContainer">
        <div class="addOrEditTop">
            <img src="@/assets/back.png" alt="" @click="() => { router.replace('/bankCardList') }">
            <p class="pageName">
                Thêm tài khoản ngân hàng
            </p>
            <div class="customer"></div>
        </div>
        <div class="tip">
            <img src="@/assets/tipIcon2.png" alt="">
            <p class="tipContent">Gợi ý: nhập một tài khoản ngân hàng hợp lệ</p>
        </div>
        <div class="addOrEditContentWapper">
            <AddOrEditCardContent @getBankCardInfo="getBankCardInfo" :needInfo="needInfo"
                :firstNumStatus="firstNumStatus" :secondNumStatus="secondNumStatus" />
        </div>
        <div class="bottomTipAndBtn">
            <div class="bottomTip">
                <img src="@/assets/safeIcon.png" alt="">
                <p>Chứng nhận bảo mật SSL 256-bit</p>
            </div>

            <div class="btn" @click="confirmAddBankCard">
                Tiếp tục
            </div>

        </div>
    </div>
</template>

<script setup lang='ts'>
import api, { type BankCardModel } from '@/api';
import AddOrEditCardContent from '@/components/addOrEditCardContent.vue';
import { getItem } from '@/utils/token-utils';
import { Toast } from 'tdesign-mobile-vue';
import { nextTick, ref } from 'vue';
import { useRouter } from 'vue-router';

let router = useRouter()

let needInfo = ref(false)

let bankCardInfo = ref({
    accountNo: '',
    secondAccountNo: '',
    bankCode: '',
    isError: false
})

let firstNumStatus = ref(1)
let secondNumStatus = ref(1)

let bankList = ref<Array<BankCardModel>>([])
let currentSelectedCardId = ref('')


const getBankCardInfo = (inputInfo: any) => {
    bankCardInfo.value = inputInfo
    needInfo.value = false
}

const changeCircularInfoHandler = async (bankCardId: string) => {
    try {
        let changeRes = (await api.changeCircularInfo({
            uuid: getItem('uuid'),
            token: getItem('token'),
            bkid: bankCardId
        })).data
        if (changeRes.code != 0) {
            Toast({
                message: changeRes.message,
                duration: 3 * 1000
            })
        }
    } catch (error) {
        console.log(error);

    }
}

const getBankCardListHandler = async () => {
    try {
        let bankCardListres = (await api.getBankCardListData({
            uuid: getItem('uuid'),
            token: getItem('token')
        })).data
        if (bankCardListres.code == 0) {

            bankList.value = bankCardListres.data
            currentSelectedCardId.value = bankList.value.find((item) => item.accBkSelect == '0')!.accBkId

        } else {
            Toast({
                message: bankCardListres.message,
                duration: 3 * 1000
            })
        }
    } catch (error) {
        console.log(error);

    }
}

const confirmAddBankCard = async () => {
    try {
        needInfo.value = true
        nextTick(async () => {
            firstNumStatus.value = 1
            secondNumStatus.value = 1
        
            // if (!bankCardInfo.value.accountNo) {
            //     firstNumStatus.value=3
            // }
            // if (!bankCardInfo.value.secondAccountNo) {
            //     secondNumStatus.value=3
            // }
            // if ( bankCardInfo.value.accountNo&&bankCardInfo.value.secondAccountNo &&bankCardInfo.value.accountNo!=bankCardInfo.value.secondAccountNo) {
            //     secondNumStatus.value=3
            // }
            // if (firstNumStatus.value==3||secondNumStatus.value==3) {
            //     return 
            // }
            if (!bankCardInfo.value.isError) {
                let addCardRes = (await api.submitBankCardInfo({
                    uuid: getItem('uuid'),
                    token: getItem('token'),
                    accountNo: bankCardInfo.value.accountNo,
                    bankCode: bankCardInfo.value.bankCode,
                    scene: '1'
                })).data
                if (addCardRes.code == 0) {
                    await getBankCardListHandler()
                    changeCircularInfoHandler(currentSelectedCardId.value)
                    Toast({
                        message: addCardRes.message,
                        duration: 3 * 1000
                    })
                    router.replace('/bankCardList')

                } else {
                    Toast({
                        message: addCardRes.message,
                        duration: 3 * 1000
                    })
                }
            }
            needInfo.value = false
        })



    } catch (error) {
        console.log(error);

    }
} 
</script>

<style lang="less" scoped>
.addOrEditCardContainer {
    height: 100%;
    background-color: #fff;
    display: flex;
    flex-direction: column;

    .addOrEditTop {
        width: 100%;
        height: 46px;
        display: flex;
        justify-content: space-between;
        align-items: center;
        border-bottom: .05rem solid #DCDCE0;
        padding: 0 .8rem;

        &>img {
            display: block;
            width: 24px;
            height: 24px;
        }

        .pageName {
            font-weight: 600;
            font-size: 18px;
            color: #292B33;
            line-height: 26px;
            text-align: left;
            font-style: normal;
            text-transform: none;
        }

        .customer {
            width: 24px;
            height: 24px;
        }
    }

    .tip {
        padding: .4rem .6rem;
        background-color: #FFF7EB;
        border-radius: .2rem;
        border: 1px solid rgba(241, 131, 29, 0.2);
        display: flex;
        justify-content: flex-start;
        align-items: center;
        margin: .8rem;

        &>img {
            display: block;
            width: .8rem;
            height: .8rem;
            margin-right: .4rem;
        }

        .tipContent {
            // font-family: SF Pro, SF Pro;
            font-weight: 400;
            font-size: .7rem;
            color: #FF9326;
            line-height: 1.1rem;
            text-align: left;
            font-style: normal;
            text-transform: none;
        }
    }

    .addOrEditContentWapper {
        flex: 1;
        overflow-y: scroll;
    }

    .bottomTipAndBtn {
        .bottomTip {
            display: flex;
            justify-content: center;
            align-items: center;
            background-color: #FFF6EE;
            padding: .45rem 0;

            &>img {
                display: block;
                width: 1rem;
                height: 1rem;
                margin-right: .4rem;
            }

            &>p {
                font-weight: 400;
                font-size: .7rem;
                color: #626673;
                line-height: 1.1rem;
                text-align: left;
                font-style: normal;
                text-transform: none;
            }
        }

        .btn {
            background: #009959;
            border-radius: .3rem;
            padding: .55rem;
            margin: .6rem;

            // font-family: SF Pro, SF Pro;
            font-weight: 600;
            font-size: .9rem;
            color: #FFFFFF;
            line-height: 1.3rem;
            text-align: center;
            font-style: normal;
            text-transform: none;
        }
    }
}
</style>